<?xml version="1.0" encoding="UTF-8"?>
<html>
 <head>
 <meta http-equiv='content-type' content="text/html;charset=utf-8"></meta>
  <title>WireIt: How to use Wire and Terminals definitions</title>
  
<!-- YUI -->
<link rel="stylesheet" type="text/css" href="../lib/yui/fonts/fonts-min.css" /> 
<link rel="stylesheet" type="text/css" href="../lib/yui/reset/reset-min.css" />

<script type="text/javascript" src="../lib/yui/utilities/utilities.js"></script>

<!-- Excanvas -->
<!--[if IE]><script type="text/javascript" src="../lib/excanvas.js"></script><![endif]-->

<!--jQuery-->
<script type="text/javascript" src="../../jquery.min.js"></script>

<!-- WireIt -->
<script type="text/javascript" src="../js/WireIt.js"></script>
<script type="text/javascript" src="../js/CanvasElement.js"></script>
<script type="text/javascript" src="../js/Wire.js"></script>
<script type="text/javascript" src="../js/Terminal.js"></script>
<link rel="stylesheet" type="text/css" href="../css/WireIt.css" />

<style>

div.WireIt-Terminal {
	margin: 20px 8px;
}

div.blockBox {
	width: 200px;
	height: 200px;
	margin: 30px;
	float: left;
	position: relative;
	z-index: 5;
	/*background-color: rgb(255,200,200);*/
	border: 1px solid #aaa;
	opacity: 0.8;
	padding: 10px;
	font-weight: bold;
}

</style>
<script type="text/javascript">
jQuery(function(){
	var block = YAHOO.util.Dom.get('block');
	var sourceListTerminal=new Array();
	var targetListTerminal = new Array();

	sourceListTerminal[0]=new WireIt.Terminal(block,{
		nMaxWires:1,
		name:'question_1',
		wireConfig:{drawingMethod:"straight"},
		ddConfig:{
			type:'1',
			allowedTypes:'2'
		},
		offsetPosition:[30,30]//left,top
	});

	sourceListTerminal[1]=new WireIt.Terminal(block,{
		nMaxWires:1,
		name:'question_1',
		wireConfig:{drawingMethod:"straight"},
		ddConfig:{
			type:'1',
			allowedTypes:'2'
		},
		offsetPosition:[30,60]
	});


	sourceListTerminal[2]=new WireIt.Terminal(block,{
		nMaxWires:1,
		name:'question_1',
		wireConfig:{drawingMethod:"straight"},
		ddConfig:{
			type:'1',
			allowedTypes:'2'
		},
		offsetPosition:[30,90]
	});
	sourceListTerminal[3]=new WireIt.Terminal(block,{
		nMaxWires:1,
		name:'question_1',
		wireConfig:{drawingMethod:"straight"},
		ddConfig:{
			type:'1',
			allowedTypes:'2'
		},
		offsetPosition:[30,120]
	});
//value template

	targetListTerminal[0]=new WireIt.Terminal(block,{
		nMaxWires:1,
		name:'answer_1',
		wireConfig:{drawingMethod:"straight"},
		ddConfig:{
			type:'2',
			allowedTypes:'1'
		},
		offsetPosition:[100,30]
	});

	targetListTerminal[1]=new WireIt.Terminal(block,{
		nMaxWires:1,
		name:'answer_1',
		wireConfig:{drawingMethod:"straight"},
		ddConfig:{
			type:'2',
			allowedTypes:'1'
		},
		offsetPosition:[100,60]
	});

	targetListTerminal[2]=new WireIt.Terminal(block,{
		nMaxWires:1,
		name:'answer_1',
		wireConfig:{drawingMethod:"straight"},
		ddConfig:{
			type:'2',
			allowedTypes:'1'
		},
		offsetPosition:[100,90]
	});

	targetListTerminal[3]=new WireIt.Terminal(block,{
		nMaxWires:1,
		name:'answer_1',
		wireConfig:{drawingMethod:"straight"},
		ddConfig:{
			type:'2',
			allowedTypes:'1'
		},
		offsetPosition:[100,120]
	});
 

});

</script>

<script type="text/javascript">
jQuery(function(){
	var source_1 = YAHOO.util.Dom.get('source-1');
	var source_2 = YAHOO.util.Dom.get('source-2');
	var source_3 = YAHOO.util.Dom.get('source-3');
	var source_4 = YAHOO.util.Dom.get('source-4');

	var target_1 = YAHOO.util.Dom.get('target-1');
	var target_2 = YAHOO.util.Dom.get('target-2');
	var target_3 = YAHOO.util.Dom.get('target-3');
	var target_4 = YAHOO.util.Dom.get('target-4');

	var sourceListTerminal=new Array();
	var targetListTerminal = new Array();

	sourceListTerminal[0]=new WireIt.Terminal(source_1,{
		nMaxWires:1,
		name:'question_1',
		wireConfig:{drawingMethod:"straight"},
		ddConfig:{
			type:'1',
			allowedTypes:'2'
		},
		offsetPosition:[0,0]//left,top
	});

	sourceListTerminal[1]=new WireIt.Terminal(source_2,{
		nMaxWires:1,
		name:'question_1',
		wireConfig:{drawingMethod:"straight"},
		ddConfig:{
			type:'1',
			allowedTypes:'2'
		},
		offsetPosition:[0,0]
	});


	sourceListTerminal[2]=new WireIt.Terminal(source_3,{
		nMaxWires:1,
		name:'question_1',
		wireConfig:{drawingMethod:"straight"},
		ddConfig:{
			type:'1',
			allowedTypes:'2'
		},
		offsetPosition:[0,0]
	});
	sourceListTerminal[3]=new WireIt.Terminal(source_4,{
		nMaxWires:1,
		name:'question_1',
		wireConfig:{drawingMethod:"straight"},
		ddConfig:{
			type:'1',
			allowedTypes:'2'
		},
		offsetPosition:[0,0]
	});
//value template

	targetListTerminal[0]=new WireIt.Terminal(target_1,{
		nMaxWires:1,
		name:'answer_1',
		wireConfig:{drawingMethod:"straight"},
		ddConfig:{
			type:'2',
			allowedTypes:'1'
		},
		offsetPosition:[0,0]
	});

	targetListTerminal[1]=new WireIt.Terminal(target_2,{
		nMaxWires:1,
		name:'answer_1',
		wireConfig:{drawingMethod:"straight"},
		ddConfig:{
			type:'2',
			allowedTypes:'1'
		},
		offsetPosition:[0,0]
	});

	targetListTerminal[2]=new WireIt.Terminal(target_3,{
		nMaxWires:1,
		name:'answer_1',
		wireConfig:{drawingMethod:"straight"},
		ddConfig:{
			type:'2',
			allowedTypes:'1'
		},
		offsetPosition:[0,0]
	});

	targetListTerminal[3]=new WireIt.Terminal(target_4,{
		nMaxWires:1,
		name:'answer_1',
		wireConfig:{drawingMethod:"straight"},
		ddConfig:{
			type:'2',
			allowedTypes:'1'
		},
		offsetPosition:[0,0]
	});
 

});

</script>
<style type="text/css">
.question-num,.source-list,.target-list{
	float:left;
}
.source-list{
	#float:left;
}
.target-list{
	#float:left;
}

.source-list li div {
    float: left;
    line-height: 30px;
    position: relative;
}

.target-list li div {
    float: left;
    line-height: 30px;
    position: relative;
}
</style>

 </head>
 <body>
	<ul><li>
		<div class="question-num">
			<div class='maching-incorrect-pic'></div>1)
		</div>
		<ul class="source-list">
			<li>
				<div class="source-text">source_1</div><div id="source-1"></div>
			</li>

			<li>
				<div class="source-text">source_2</div><div id="source-2"></div>
			</li>

			<li>
				<div class="source-text">source_3</div><div id="source-3"></div>
			</li>

			<li>
				<div class="source-text">source_4</div><div id="source-4"></div>
			</li>
		</ul>
		<ul class="target-list">
			<li>
				<div class="target-text">target_1</div><div id="target-1"></div>
			</li>

			<li>
				<div class="target-text">target_2</div><div id="target-2"></div>
			</li>

			<li>
				<div class="target-text">target_3</div><div id="target-3"></div>
			</li>

			<li>
				<div class="target-text">target_4</div><div id="target-4"></div>
			</li>
		
		</ul>
	</li></ul>
	<div id='block'  class="blockBox">

 </body>
</html>